
import "../css/animate.min.css"
import "../css/products.css"
//WOW引入
import { WOW } from "../js/wow.js";
//整合首页用到的所有js
import {
    getProducts
} from "./request.js";

let imgs = document.querySelectorAll("img")
let beauty = document.querySelector(".banner>p")
let text = document.querySelector(".banner>span")
let products = document.querySelectorAll(".products>ul>li")
let sponsors = document.querySelectorAll(".partner>ul>li>img")

//图片添加类名进行懒加载
imgs.forEach(item => {
    item.classList.add("lazy-img")
})

import {
    lazyLoad
} from "../utils/lazyLoad.js";
window.onload = async function () {
    let resPro = await getProducts();
    let res = resPro.results
    let address = [];
    //拿到每个图片的地址
    res.forEach((item)=>{
        address.push(item.photo_detail.url)
    })
    //将每张图片地址给到每个img
    imgs.forEach((item,index)=>{
        item.setAttribute("data-src",address[index])
    })


    //懒加载
    lazyLoad(".lazy-img");
};

//首图文字添加效果
beauty.classList.add("animated")
beauty.classList.add("zoomInUp")
text.classList.add("animated")
text.classList.add("zoomInUp")

//产品中心的小li添加效果
products.forEach(item=>{
    item.addEventListener("mousemove",()=>{
        item.classList.add("move")
    })
    item.addEventListener("mouseout",()=>{
        item.classList.remove("move")
    })
})

//设置赞助商特效
sponsors.forEach((item) => {
    item.addEventListener("mousemove", () => {
        item.classList.add("animated")
        item.classList.add("swing")
        item.classList.add("infinite")
    })
    item.addEventListener("mouseout",()=>{
        item.classList.remove("animated")
    })
})

 new WOW().init()